<template>
  <div id="welfare">
    <!-- 福利    -->
    <div class="welfare-container">
      <div class="welf-header">
        <div class="welf1">
          <div></div>
          <p>还没有关注的门店哦，快去关注吧~</p>
        </div>
      </div>
      <div class="welf-box">
        <div class="welf-box-t">
          <p>附近热门动态</p>
        </div>
        <div class="welf-box-c">
          <!-- 优惠店铺-->
          <div class="welf-box-c-1">
            <div class="list1">
              <a href>
                <img src="../image/wlf/5b42af22N54a6bbf4.jpg" alt>
                <span class="sp1">
                  <span>淘菜园-南京玄武湖旗舰店</span>
                  <i>17小时前</i>
                </span>
              </a>
              <button>关注</button>
            </div>
            <a href class="tt">
              淘菜园
              冬日暖心活动~
              全场满30减15+免运
              鸡蛋8枚1元抢
              青菜1元花菜1元洋葱1元
              全场爆品统统 1元抢
              免费开通会员 畅享会员大礼包
              更多优惠 点击图片进店选购
            </a>
            <div class="pp">
              <a class="pp-pic" href>
                <img class="" src="../image/wlf/ae8031a512aa96ae.jpg" alt>
              </a>  
            </div>
          </div>
                    <div class="welf-box-c-1">
            <div class="list1">
              <a href>
                <img src="../image/wlf/5b42af22N54a6bbf4.jpg" alt>
                <span class="sp1">
                  <span>淘菜园-南京玄武湖旗舰店</span>
                  <i>17小时前</i>
                </span>
              </a>
              <button>关注</button>
            </div>
            <a href class="tt">
              淘菜园
              冬日暖心活动~
              全场满30减15+免运
              鸡蛋8枚1元抢
              青菜1元花菜1元洋葱1元
              全场爆品统统 1元抢
              免费开通会员 畅享会员大礼包
              更多优惠 点击图片进店选购
            </a>
            <div class="pp">
              <a class="pp-pic" href>
                <img class="" src="../image/wlf/ae8031a512aa96ae.jpg" alt>
              </a>  
            </div>
          </div>
                    <div class="welf-box-c-1">
            <div class="list1">
              <a href>
                <img src="../image/wlf/5b42af22N54a6bbf4.jpg" alt>
                <span class="sp1">
                  <span>淘菜园-南京玄武湖旗舰店</span>
                  <i>17小时前</i>
                </span>
              </a>
              <button>关注</button>
            </div>
            <a href class="tt">
              淘菜园
              冬日暖心活动~
              全场满30减15+免运
              鸡蛋8枚1元抢
              青菜1元花菜1元洋葱1元
              全场爆品统统 1元抢
              免费开通会员 畅享会员大礼包
              更多优惠 点击图片进店选购
            </a>
            <div class="pp">
              <a class="pp-pic" href>
                <img class="" src="../image/wlf/ae8031a512aa96ae.jpg" alt>
              </a>  
            </div>
          </div>
        </div>
      </div>
    </div>
     <appfooter active="welf"></appfooter>
  </div>
</template>
<script>
export default {};
</script>
<style lang="scss" scoped>
* {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
#welfare {
  width: 100%;
  .welfare-container {
    background: #eee;
    .welf-header {
      height: 446px;
      margin: 0px 20px 20px 20px;
      .welf1 {
        width: 100%;
        height: 396px;
        padding: 0px 0px 50px;
        background-color: #fff;
        div {
          width: 320px;
          height: 320px;
          margin: 0px auto;
          background: url(../image/wlf/cart_empty.c83f6832.png) no-repeat center;
          background-size:320px 320px;
        }
        p {
          margin-top: 20px;
          text-align: center;
          font-size: 28px;
          color: #666;
        }
      }
    }
    .welf-box {
      .welf-box-t {
        p {
          font-size: 40px;
          line-height: 48px;
          margin: 60px 20px 30px;
          color: #333;
          font-weight: 700;
        }
      }
      .welf-box-c {
        padding: 0px 20px;
        .welf-box-c-1 {
          margin: 20px 0px;
          background-color: #fff;
          padding: 32px 20px;
          border-radius: 16px;
          .list1 {
            position: relative;
            a {
              display: flex;

              img {
                width: 80px;
                height: 80px;
                border: 1px solid #eee;
                border-radius: 80px;
                display: block;
              }
              .sp1 {
                padding-left: 20px;
                span {
                  height: 40px;
                  font-size: 28px;
                  line-height: 40px;
                  color: #333;
                }
                i {
                  display: block;
                  height: 30px;
                  font-size: 24px;
                  color: #999;
                  margin-top: 6px;
                }
              }
            }
            button {
              background-color: #47b34f;
              width: 132px;
              height: 52px;
              font-size: 22px;
              color: #fff;
              line-height: 52px;
              text-align: center;
              border-radius: 26px;
              position: absolute;
              right: 0px;
              top: 10px;
              border:0;
            }
          }
          .tt {
            margin-top: 10px;
            font-size: 32px;
            color: #333;
            line-height: 48px;
          }
          .pp {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            .pp-pic{
              display: block;
              width: 100%;
               //height: 210px;
               margin-right: 4px;
               border-radius: 12px;
               border: 1px solid #f8f8f8;
              img{
                display: block;
                width: 100%;
                height: 100%;
              } 
            }
            .pi {
              display: block;
              width: 210px;
              height: 210px;
              margin-right: 4px;
              border: 1px solid #f8f8f8;
              border-radius: 8px;
              position: relative;
              img {
                display: block;
                width: 100%;
                height: 100%;
              }
              .pp1 {
                display: block;
                line-height: 42px;
                width: 100%;
                color: #ff5757;
                font-size: 28px;
                text-align: center;
                background: #eee;
                position: absolute;
                top: 168px;
                i {
                  text-decoration: line-through;
                  color: #999;
                }
              }
              .pp2 {
                position: absolute;
                top: 0px;
                color: #fff;
                font-size: 20px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                margin-right: 6px;
                padding: opx 6px;
                border-radius: 8px 2px;
                background: linear-gradient(
                  left top,
                  rgb(255, 200, 55),
                  rgb(255, 150, 51)
                );
                span {
                  display: inline-block;
                  height: 20px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>


